<template>
  <div class="user-card">
    <div class="up-face">
      <UserAvatar
        :url="userInfo.avatar"
        size="lg"
        :uuid="userInfo.uuid"
      ></UserAvatar>
    </div>
    <div class="info-wrap">
      <div class="headline">
        <router-link
          :to="{
            name: 'account',
            params: { uuid: userInfo.uuid },
          }"
          target="_blank"
          class="user-nickname"
          >{{ userInfo.nickname }}</router-link
        >
        <!-- <button class="attention-btn" @click="handleAttention">+关注</button> -->
      </div>
      <div class="up-info">
        <span>稿件: {{ userInfo.videoCount }}</span>
        <span>粉丝数: {{ userInfo.fansCount }}</span>
      </div>
      <div class="desc">{{ userInfo.personalSign }}</div>
      <div class="up-videos">
        <div
          class="video-item"
          v-for="(item, index) in userInfo.videoList"
          :key="index"
        >
          <router-link
            :to="{ name: 'video', params: { uvid: item.uvid } }"
            target="_blank"
          >
            <el-image
              :src="item.cover"
              fit="contain"
              class="video-pic"
            ></el-image>
          </router-link>

          <div class="video-info">
            <router-link
              :to="{ name: 'video', params: { uvid: item.uvid } }"
              target="_blank"
              class="video-desc"
              >{{ item.title }}</router-link
            >
            <span class="ptime"> {{ item.uploadTime }}</span>
          </div>
        </div>
        <router-link :to="{name: 'account', params: { uuid: userInfo.uuid } }" class="video-more" target="_blank">查看全部视频</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import UserAvatar from "@/components/common/UserAvatar.vue";
export default {
  props: {
    userInfo: {
      type: Object,
    },
  },
  components: { UserAvatar },
  methods: {
    handleClick() {},
    handleAttention() {},
  },
};
</script>

<style lang="scss" scoped>
.user-card {
  position: relative;
  display: block;
  padding: 20px 0 20px 102px;
  border-bottom: 1px solid #e5e9ef;
  height: 200px;
  z-index: 1;
  .up-face {
    position: absolute;
    left: 0;
    width: 90px;
    height: 90px;
    top: 20px;
  }
  .info-wrap {
    .headline {
      margin-bottom: 12px;
    }
    .up-info {
      margin-bottom: 10px;
      span {
        margin-right: 15px;
        font-size: 12px;
        line-height: 12px;
        color: #6d757a;
      }
    }
    .desc {
      font-size: 12px;
      margin-bottom: 14px;
      width: 750px;
      color: #6d757a;
      line-height: 16px;
    }
    .up-videos {
      position: relative;
      .video-item {
        float: left;
        width: 200px;
        height: 50px;
        position: relative;
        padding-left: 92px;
        margin-right: 30px;
        z-index: 0;
        .video-pic {
          position: absolute;
          top: 0;
          left: 0;
          width: 80px;
          height: 50px;
          border-radius: 4px;
        }
        .video-info {
          position: relative;
          height: 100%;
          .video-desc {
            position: absolute;
            height: 36px;
            top: -3px;
            line-height: 18px;
            font-size: 12px;
            overflow: hidden;
          }
          .ptime {
            position: absolute;
            left: 0;
            bottom: 0;
            line-height: 12px;
            color: #99a2aa;
            font-size: 12px;
          }
        }
      }
      .video-more {
        position: absolute;
        right: 0;
        bottom: 0;
        line-height: 12px;
        color: #00a1d6;
        font-size: 12px;
      }
    }
  }
}

.user-nickname {
  font-size: 16px;
  font-weight: 700;
}
.attention-btn {
  width: 64px;
  height: 24px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  text-align: center;
  line-height: 24px;
  background-color: #00d684;
  color: white;
  vertical-align: middle;
  border: 0;
  border-radius: 4px;
}
</style>